import React, { useState } from 'react'
import { Space, Table, Button, Modal, Form, Input,DatePicker } from 'antd';


export default function List() {
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '生产日期',
      dataIndex: 'data',
      key: 'data',
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '入库时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '产地',
      dataIndex: 'area',
      key: 'area',
    },
    {
      title: '描述',
      dataIndex: 'introduce',
      key: 'introduce',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button onClick={showModal}>编辑</Button>
          <Button type="primary" danger >
            删除
          </Button>
        </Space>
      ),
    },
  ];
  const data = [
    {
      key: '1',
      name: '旺仔牛奶',
      data: '11111',
      price: '25',
      time: '2222',
      area: '重庆',
      introduce: '好喝'
    },
  ];
  /*编辑商品 */
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onFinish = (values) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const GoodsList = () => <Table columns={columns} dataSource={data}></Table>

  return (
    <>
      <GoodsList></GoodsList>
      <Modal title="修改商品" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          name="basic"
          labelCol={{
            span: 6,
          }}
          wrapperCol={{
            span: 16,
          }}
          initialValues={{
            remember: true,
          }}
          style={{ maxWidth: 600 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="名称"
            name="name"
            rules={[{ required: true, message: '请输入商品名称!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="生产日期"
            name="data"
            rules={[{ required: true, message: '请输入生产日期!' }]}
          >
            <DatePicker style={{width:'315px'}}/>
          </Form.Item>
          <Form.Item
            label="价格"
            name="price"
            rules={[{ required: true, message: '请输入价格!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="入库时间"
            name="time"
            rules={[{ required: true, message: '请输入价格!' }]}
          >
           <DatePicker style={{width:'315px'}}/>
          </Form.Item>
          <Form.Item
            label="产地"
            name="area"
            rules={[{ required: true, message: '请输入价格!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="描述"
            name="price"
            rules={[{ required: true, message: '请输入价格!' }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>

  )
}
